<template>
	<view class="margin-sm">
		<view class="dflex-b">
			<image mode="aspectFit" src="https://img.shihuashengyi.cn/static/images/user/default.png" class="border-radius-lg headimg" style="width: 66rpx; height: 66rpx;"></image>
			<view class="flex1 margin-left-sm">
				<view class="bg-main border-radius-lg dflex" style="height: 76rpx; line-height: 76rpx;">
					<input type="text" placeholder="输入关键词" v-model="searchKey" class="w-full padding-lr" />
					<view class="iconfont iconsousuo-01 bg-base border-radius-lg h-full padding-lr-xl" @click="search"></view>
				</view>
			</view>
		</view>
		<view class="margin-top">
			<!-- <scroll-view scroll-x class="ws-np">
				<view class="dflex padding-bottom-sm">
					<block v-for="(item,index) in ['全部','关注','推荐','服饰','箱包','鞋子','手机','家电','饰品']" :key="index" >
					<view class="pos-r padding-tb-sm margin-right-xs padding-lr diblock line-height-1 tac" :class="{active: title_id === index}" @click="pitch(index)">
						{{item}}
						<view class="badge" v-if="item == '关注'">2</view>
					</view>
					</block>
				</view>
			</scroll-view> -->
		</view>
		<view class="goodsContent border-radius">
			<block v-for="(item, index) in datas" :key="index">
				<view class="bg-main margin-bottom-sm border-radius" @click="dongt(item.id)">
					<view class="padding-lr-sm margin-top-sm clamp-2">{{item.title}}</view>
					<view class="dflex-b padding-lr-sm margin-tb-sm">
						<view class="dflex" style="width: 60%;">
							<image mode="aspectFit" src="https://img.shihuashengyi.cn/static/images/user/default.png" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
							<view class="ft-dark margin-left-xs fs-xxs">{{item.categoryName}}</view>
						</view>
						<view class="dflex">
							<view class="iconfont iconaixin"></view>
							<view class="clamp ft-dark margin-left-xs fs-xxs">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 置顶 -->
		<use-totop ref="usetop" type="tabbar"></use-totop>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {notice_page} from "../../js_sdk/apis/notice.js"
	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				title_id: 0,
				searchKey:null,
				scrollTop: 0,
				datas:[],
				category:1
			};
		},
		onLoad({category}) {
			this.loadData()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			loadData(callback){
				notice_page({title:this.searchKey,category:this.category}).then(res=>{
					this.datas=res.data.records
					callback&&callback()
				})
			},
			// 跳转个人
			user() {
				uni.navigateTo({
					url: `/pages/shopping/user`
				});
			},
			// 搜索
			search() {
				this.loadData()
			},
			pitch(index) {
				this.title_id = index
			},
			// 跳转详情页
			dongt(options) {
				uni.navigateTo({
					url: `/pages/shopping/detail?id=${options}`
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.active {
		color: #ff6a6c;
		font-weight: bold;
		font-size: 34rpx;
	}

	.goodsContent {
		width: 100%;
		.ft-dark {
			color: #585858;
		}
	}


</style>
